<template>
  <div id="app">
    <div class="header">
      <div class="time">12:00</div>
      <van-nav-bar
          title=""
          left-text=""
          left-arrow
          @click-left="onClickLeft"
      />
      <div class="title">申请分销商</div>
      <div class="camera"></div>
    </div>
    <div class="apply-distributor-section">
      <div class="illustration-container">
        <img src="distributor-illustration.png" alt="DistributorIllustration" class="illustration">
      </div>
      <form @submit.prevent="submitForm">
        <div class="form-item">
          <label>真实姓名</label>
          <input type="text" v-model="formData.realName" placeholder="张">
        </div>
        <div class="form-item">
          <label>手机号</label>
          <input type="text" v-model="formData.phoneNumber" placeholder="18007273">
        </div>
        <div class="form-item">
          <label>身份证正面</label>
          <input type="file" @change="handleFileUpload">
          <div class="file-upload-preview" v-if="formData.idCardFront">
            <span class="file-name">{{ formData.idCardFront.name }}</span>
          </div>
        </div>
        <div class="form-submit">
          <button type="submit">提交申请</button>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: "App",
  data() {
    return {
      formData:{
        realName: '张',
        phoneNumber: '18007273',
        idCardFront: null
      }
    };
  },
  methods: {
    handleFileUpload(event) {
      // 获取上传的文件
      this.formData.idCardFront = event.target.files[0];
    },
    onClickLeft() {
      this.$router.push('/fenxiao')
    },
    async submitForm() {
      try {
        const formData = new FormData();
        formData.append('realName', this.formData.realName);
        formData.append('phoneNumber', this.formData.phoneNumber);
        formData.append('idCardFront', this.formData.idCardFront);

        const response = await axios.post('/api/apply-distributor', formData, {
          headers: {
            'Content-Type':'multipart/form-data'
          }
        });

        if (response.data.success) {
          alert('申请提交成功');
        } else {
          alert('申请提交失败');
        }
      } catch (error) {
        console.error('提交申请出错:', error);
        alert('提交申请时出现错误');
      }
    }
  }
};
</script>

<style scoped>
#app {
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.header {
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}
.time {
  font-size: 12px;
}
.title {
  font-size: 16px;
  font-weight: bold;
}
.camera {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: lightgray;
}
.apply-distributor-section {
                         width: 100%;
                         display: flex;
                         flex-direction: column;
                         align-items: center;
                         margin-top: 20px;
                       }
.illustration-container {
                  width: 100px;
                  height: 100px;
                  margin-bottom: 20px;
                }
.illustration {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.form-item {
          display: flex;
          flex-direction: column;
          width: 80%;
          margin-bottom: 20px;
        }
.form-item label {
          font-size: 14px;
          margin-bottom: 5px;
        }
.form-item input {
          padding: 10px;
          border: 1px solid #ccc;
          border-radius: 5px;
        }
.file-upload-preview {
                   background-color: #e6e6e6;
                   padding: 10px;
                   border-radius: 5px;
                   margin-top: 5px;
                 }
.file-name {
          font-size: 12px;
          color: #666;
        }
.form-submit {
          width: 80%;
        }
.form-submit button {
          width: 100%;
          padding: 10px;
          background-color: #007AFF;
          color: white;
          border: none;
          border-radius: 5px;
          cursor: pointer;
        }
</style>
